<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FirstDemo</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        nav {
            height: 25px;
            background-color: blue;
        }

        header {
            height: 80px;
            background-color: red;
        }

        #sectionA {
            height: 500px;
            width: 40%;
            background-color: yellow;
            float: left;
        }

        #sectionB {
            height: 500px;
            width: 60%;
            background-color: blue;
            float: right;
         }

        #articleA {
            width: 250px;
            height: 250px;
            background-color: green;
            float: left;
            position: relative;
            top: 100px;
            left: 80px;
        }

        #articleB {
            width: 250px;
            height: 250px;
            background-color: green;
            float: right;
            position: absolute;
            left: 500px;
            bottom: 0;
        }

        footer{
            height: 80px;
            background-color: red;
            clear: both;
        }

    </style>
</head>
<body>

<nav>nav区域</nav>
<header>header区域</header>
<section id="sectionA">section区域</section>
<section id="sectionB">
    <article id="articleA">article区域
        <article id="articleB">article区域</article>
    </article>

</section>
<footer>footer区域</footer>

</body>
</html>